<template>
	<div class="sidebar">
		<div v-link='{path:"/Home"}'
				 @click='hide'>
				<i class='icon-shouye2 iconfont'></i><span>首页</span>
		</div>
		<hr>
		<scroller v-ref:scroller
					:lock-x='true'
					>
			<div class="scrollC">
				<span v-for='type in types'
					  v-link='{name:"type",params:{typeId:type.id}}'
					  @click='hide(type.id)'
					  v-show='type.id!=this.activeId'>
					{{type.name}}
				</span>
			</div>
		</scroller>
	</div>
</template>

<script>
import Scroller from 'vux-com/scroller'

	export default{
		components:{
			Scroller
		},
		methods:{
			hide:function(id){
				this.$dispatch('hideSideBar');
				this.exit();
				this.entryDetail(id);
			}
		},
		events:{
			resetScroller:function(){
				this.$refs.scroller.reset()
			}
		},
		vuex:{
			getters:{
				types:function(state){
					return state.types;
				},
				activeId:function(state){
					return state.activeId;
				}
			},
			actions:{
				exit:function({dispatch}){
					dispatch('DELETE_LIST')
				},
				entryDetail:function({dispatch},id){
					dispatch('ENTRY_DETAIL',id)
				}
			}
		}
	}
</script>

<style scoped lang='scss'>
	.sidebar{
		font-family: '微软雅黑';
		height: 100%;
		width: 200px;
		background: #fff;
		display: inline-block;
		position: fixed;
		z-index: 99;
		padding: 10px;
		text-align: center;
		span{
			letter-spacing: 12px;
			font-size: 20px;
			display: inline-block;
			text-align: center;
			width: 150px;
			margin-top: 10px;
		}
		.scrollC{
			padding-bottom: 100px;
		}
	}


	/*iconfont*/
	@font-face {font-family: "iconfont";
	  src: url('../assets/iconfont/iconfont.eot?t=1473076993'); /* IE9*/
	  src: url('../assets/iconfont/iconfont.eot?t=1473076993#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('../assets/iconfont/iconfont.woff?t=1473076993') format('woff'), /* chrome, firefox */
	  url('../assets/iconfont/iconfont.ttf?t=1473076993') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	  url('../assets/iconfont/iconfont.svg?t=1473076993#iconfont') format('svg'); /* iOS 4.1- */
	}

	.iconfont {
	  font-family:"iconfont" !important;
	  font-size:16px;
	  font-style:normal;
	  -webkit-font-smoothing: antialiased;
	  -webkit-text-stroke-width: 0.2px;
	  -moz-osx-font-smoothing: grayscale;
	}
	.icon-shouye2:before { content: "\e66e"; font-size: 35px;}
</style>